<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
    <title>CoolMeeting会议管理系统</title>
    <link rel="stylesheet" href="styles/common.css"/>
    <script>
        var xmlHttp;
        function createXMLHttpRequest(){
            if(window.ActiveXObject){
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }else if(window.XMLHttpRequest){
                xmlHttp = new  XMLHttpRequest();
            }
        }
        //校验用户名
        function validate(){
            createXMLHttpRequest();
            var username = document.getElementById("username").value;
            var url = "validateUsernameServlet?username=" + escape(username);
            xmlHttp.open('get',url,true);
            xmlHttp.onreadystatechange = callback;
            xmlHttp.send(null);
        }
        function callback(){
            //当客户端完全接受完服务器的响应后，并且状态为200
            if(xmlHttp.readyState == 4){
                if(xmlHttp.status == 200){
                    //可以接收数据了
                    var message = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
                    var passed = xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
                    //展示结果
                    setMessage(message,passed);
                }
            }
        }
        function setMessage(message,passed){
            var validateMessage = document.getElementById("validateMessage")
            var fontColor = "green";
            if(passed == 'false'){
                fontColor = "red";
                document.getElementById("btn").disabled = true;
            }
            validateMessage.innerHTML = "<font color="+fontColor+">"+message+"</font>";
        }

        function check(){
            var firstpassword = document.getElementById("firstpassword").value;
            var secondpassword = document.getElementById("secondpassword").value;
            var confirminfo = document.getElementById("confirminfo");
            if(firstpassword != secondpassword){
                confirminfo.innerHTML = "<font color='red'>两次输入的密码不相符</font>";
                document.getElementById("btn").disabled = true;
            }else {
                confirminfo.innerHTML = "<font color='green'>两次输入的密码相符</font>";
            }
        }

    </script>
</head>
<body>
<div class="page-body">

    <div class="page-content">
        <div class="content-nav">
            人员管理 > 员工注册
        </div>
        <form action="register" method="post">
            <fieldset>
                <legend>员工信息</legend>
                <table class="formtable" style="width:50%">
                    <tr>
                        <td>姓名：</td>
                        <td>
                            <input type="text" id="employeename" name="employeename" maxlength="20"/>
                        </td>
                    </tr>
                    <tr>
                        <td>账户名：</td>
                        <td>
                            <input type="text" id="username" name="username" onchange="validate()"  maxlength="20"/>
                            <div id="validateMessage"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>密码：</td>
                        <td>
                            <input type="password" id="firstpassword" name="password" maxlength="20" placeholder="请输入6位以上的密码"/>
                        </td>
                    </tr>
                    <tr>
                        <td>确认密码：</td>
                        <td>
                            <input type="password" name="secondpassword" onchange="check()" id="secondpassword" maxlength="20"/>
                            <div id="confirminfo"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>联系电话：</td>
                        <td>
                            <input type="text" name="phone" id="phone" maxlength="20"/>
                        </td>
                    </tr>
                    <tr>
                        <td>电子邮件：</td>
                        <td>
                            <input type="text" name="email" id="email" maxlength="20"/>
                        </td>
                    </tr>
                    <td>所在部门：</td>
                    <td>

                        <select name="deptid">
                            <c:forEach var="department" items="${departmentList}">
                                <option value="${department.departmentid}">${department.departmentname}</option>
                            </c:forEach>
                        </select>
                    </td>
                    </tr>
                    <tr>
                        <td colspan="6" class="command">
                            <input type="submit" id="btn" class="clickbutton" value="注册"/>
                            <input type="reset" class="clickbutton" value="重置"/>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </form>
    </div>
</div>
<div class="page-footer">
    <hr/>
    更多问题，欢迎联系<a href="mailto:webmaster@eeg.com">管理员</a>
    <img src="images/footer.png" alt="CoolMeeting"/>
</div>
</body>
</html>
